<template>
	<view class="page">
	<p-navbar title="公开课程"></p-navbar>	
	<view class="video">
		<video :src="itemList.content" controls></video>
	</view>
	<view class="title">
		{{itemList.title}}
	</view>
	<view style="color: #FE485A;">
		免费
	</view>
	<view class="video-text">
		<text>诸葛量化</text><text>{{itemList.updateTime}}</text>
	</view>
	<view style="margin-top: 60rpx;">
		推荐
	</view>
	<view class="bulletin">
		<view class="bulletin-content">
			<view class="bulletin-item flex" v-for="(item,index) in bulletinList" :key="index" @tap="nav(item)">
				<view class="bulletin-left">
					<image :src="item.imageList" mode=""></image>
				</view>
				<view class="bulletin-right">
					<view class="bulletin-text">
						{{item.title}}
					</view>
					<view style="color: #FE485A;font-size: 24rpx;">
						{{type=='0'?'免费':'学习方法很重要'}}
					</view>
					<view class="bulletin-readNumber flex align-items justify-between">
						<view class="">
							诸葛量化
						</view>
						<view class="">
							{{item.updateTime}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bulletinList:[],
				itemList:{},
				type:'',
				
			}
		},
		methods: {
			nav(item){
					// this.$Router.push({ 
					// 	path:'/pages/college/course-item',
					// 	query:{
					// 		data:JSON.stringify(item),
					// 		type:JSON.stringify(this.type)
					// 	}
					// })
					this.itemList =item;
					this.type = this.type;
					this.$nextTick(()=>{
						uni.pageScrollTo({
							scrollTop:0
						})
					})
			},
			video(){
				this.request.post('getInformationByType?infoType=3&page=1&pageSize=20', {
				}).then(res=>{
					this.bulletinList.push(...res.data.data)
					this.bulletinList =  this.bulletinList.filter((item)=>{
						return this.itemList.id!=item.id
					})
				})
			},
		},
		onLoad(options) {
		  this.itemList = JSON.parse(this.$Route.query.data);
		  this.type = JSON.parse(this.$Route.query.type);
		  this.video()
		},
	}
</script>

<style lang="scss">
	.page{
		width: 678rpx;
		margin: 0 auto;
		// border: 1px solid red;
	}
	.video{
		height: 340rpx;
		// border: 1px solid red;
		// background: rgba($light-color,0.2);
		margin: 60rpx auto;
		text-align: center;
		video{
			width: 100%;
			height: 100%;
		}
	}
	.title{
		margin-bottom: 26rpx;
	}
	text{
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: bold;
		color: $color-fu;
		&:last-child{
			margin-left: 90rpx;
		}
	}
	.bulletin{
		.bulletin-title{
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #FFFFFF;
			position: relative;
			padding-left: 20rpx;
			text{
				color: #FF8128;
			}
			&::after{
				content: "";
				height: 40rpx;
				border: 2px solid #FF8128;
				position: absolute;
				left: 0;
				top: 0;
				border-radius: 6px;
			}
		}
		.bulletin-content{
			width: 678rpx;
			margin: 34rpx auto 0;
			border-radius: 32rpx;
			// background: rgba(22, 119, 255, 0.05);
			// padding: 40rpx;
			box-sizing: border-box;
			.bulletin-item{
				height: 180rpx;
				margin-bottom: 36rpx;
				.bulletin-left{
					width: 240rpx;
					height: 180rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.bulletin-right{
					margin-left: auto;
					width: 388rpx;
					.bulletin-text{
						margin-bottom: 22rpx;
						font-size: 28rpx;
						font-family: PingFang;
						font-weight: bold;
						// color: #FFFFFF;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.bulletin-readNumber{
						font-size: 24rpx;
						font-family: PingFang;
						font-weight: bold;
						color: $color-fu;
					}
				}
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
</style>
